<!--
 * @Descripttion :
 * @Author       : RAN
 * @Date         : 2021-07-14 09:49:32
 * @LastEditors  : RAN
 * @LastEditTime : 2021-07-15 11:29:03
-->
<template>
  <tsl-chart class="chart" ref="myEcharts" :option="option" @click="handleClick" />
</template>

<script>
import { Chart } from "tsl-vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent
} from "echarts/components";

use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PieChart,
  CanvasRenderer,
  LegendComponent,
  ToolboxComponent
]);

export default {
  name: "pie",
  components: {
    TslChart: Chart
  },
  data() {
    return {
      pieData: [
        {
          value: 3,
          name: "TACOS Metro",
          itemStyle: {
            color: "rgb(255,160,131)"
          }
        },
        {
          value: 479,
          name: "TACOS Enterprise",
          itemStyle: {
            color: "rgb(182,248,175)"
          }
        },
        {
          value: 842,
          name: "TACOS Lite",
          itemStyle: {
            color: "rgb(186,222,254)"
          }
        }
      ],
      option: {}
    };
  },
  mounted() {
    let ratio = window.innerHeight / 1536;
    this.option = {
      grid: {
        bottom: 0
      },
      title: {
        text: "1,324",
        left: "34.5%",
        top: "46.5%",
        subtext: "总覆盖",
        textAlign: "center",
        itemGap: 5,
        textStyle: {
          fontSize: 35,
          color: "rgba(68, 199, 242, 0.7)",
          fontWeight: "bold"
        },
        subtextStyle: {
          color: "rgba(68, 199, 242, 0.5)",
          fontSize: 20,
          fontWeight: 400
        }
      },
      tooltip: {
        trigger: "item",
        borderColor: "#44C7F2",
        borderWidth: 2,
        padding: [20, 25, 30, 25],
        backgroundColor: "rgba(27, 38, 70, 0.9)",
        textStyle: {
          fontSize: 25,
          color: "rgba(255, 255, 255, 1)"
        }
      },
      legend: [
        {
          show: true,
          orient: "vertical",
          icon: "circle",
          right: "5%",
          bottom: "10%",
          itemGap: 35,
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: "rgba(255, 255, 255, 0.7)",
            fontSize: "24px"
          }
          //   formatter: (name) => {
          //     let singleData = this.pieData.filter(function (item) {
          //       return item.name == name;
          //     });
          //     return name + "   " + `{a| ${singleData[0].value}}`;
          //   }
        }
      ],
      series: [
        {
          name: "OS装机量",
          type: "pie",
          minAngle: 30,
          data: this.pieData,
          center: ["35%", "55%"],
          radius: [73 * ratio, 157 * ratio],
          //   radius: 80,
          //   roseType: "area",
          avoidLabelOverlap: true,
          //   labelLayout: (params) => {
          //     var isLeft = params.labelRect.x < this.$refs.myEcharts.getWidth() / 2;
          //     var points = params.labelLinePoints;
          //     // Update the end point.
          //     points[2][0] = isLeft
          //       ? params.labelRect.x
          //       : params.labelRect.x + params.labelRect.width;

          //     return {
          //       labelLinePoints: points
          //     };
          //   },
          labelLine: {
            show: true,
            // length: 0,
            // length2: 0,
            maxSurfaceAngle: 80,
            lineStyle: {
              width: 2
            }
          },
          label: {
            show: true,
            position: "outside",
            // alignTo: "edge",
            formatter: "{c}",
            fontSize: 30,
            fontWeight: 400,
            color: "rgba(255, 255, 255, 0.7)",
            // formatter: function (data) {
            //   const colorObj = {
            //     "#E2E4EA": "l",
            //     "#6BD57B": "n",
            //     "#FEBF7B": "m",
            //     "#FF6D5A": "h"
            //   };
            //   return `{${colorObj[data.color]}|${data.percent}%}\n{name${colorObj[data.color]}|${
            //     data.name
            //   }}`;
            // },
            minMargin: 5,
            edgeDistance: 5,
            lineHeight: 30,
            rich: {
              l: {
                color: "#E2E4EA",
                fontSize: 20,
                fontFamily: "Source Han Sans CN",
                fontWeight: 500
              },
              n: {
                color: "#6BD57B",
                fontSize: 20,
                fontFamily: "Source Han Sans CN",
                fontWeight: 500
              },
              m: {
                color: "#FEBF7B",
                fontSize: 20,
                fontFamily: "Source Han Sans CN",
                fontWeight: 500
              },
              h: {
                color: "#FF6D5A",
                fontSize: 20,
                fontFamily: "Source Han Sans CN",
                fontWeight: 500
              },

              namel: {
                fontSize: 14,
                color: "#E2E4EA",
                fontFamily: "Source Han Sans CN",
                fontWeight: 400
              },
              namen: {
                fontSize: 14,
                color: "#6BD57B",
                fontFamily: "Source Han Sans CN",
                fontWeight: 400
              },
              namem: {
                fontSize: 14,
                color: "#FEBF7B",
                fontFamily: "Source Han Sans CN",
                fontWeight: 400
              },
              nameh: {
                fontSize: 14,
                color: "#FF6D5A",
                fontFamily: "Source Han Sans CN",
                fontWeight: 400
              }
            }
          }
        }
      ]
    };
  },
  methods: {
    handleClick(p) {
      console.log(p);
    }
  }
};
</script>

<style scoped>
.chart {
  width: 100%;
}
</style>
